<template>
  <el-dialog
    :width="props.width"
    :title="props.title"
    :close-on-click-modal="false"
  >
    <el-form
      :model="changePasswordForm"
      :label-width="120"
      :rules="formRules"
      ref="changePasswordFormRef"
    >
      <el-form-item label="原密码：" prop="oldPassword">
        <el-input
          v-model="changePasswordForm.oldPassword"
          type="password"
          show-password
          clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item label="新密码：" prop="newPassword">
        <el-input
          v-model="changePasswordForm.newPassword"
          type="password"
          show-password
          clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item label="确认新密码：" prop="confirmPassword">
        <el-input
          v-model="changePasswordForm.confirmPassword"
          type="password"
          show-password
          clearable
        >
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="float: left">
        <el-button type="primary" @click="confirm()">修改密码</el-button>
      </div>
      <el-button @click="close()">取消</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ChangePassword } from "@/models/ChangePassword";
import api from "@/utils";

export interface dialogProps {
  width?: string;
  title?: string;
  leftBtnAreaVisible?: boolean;
  previousDisabled?: boolean;
  nextDisabled?: boolean;
}

const props = withDefaults(defineProps<dialogProps>(), {
  width: "30%",
  title: "修改密码",
  leftBtnAreaVisible: false,
  previousDisabled: false,
  nextDisabled: false,
});

const emit = defineEmits<{
  (e: "close"): void;
}>();

// 关闭页面
const close = () => {
  emit("close");
};
// 校验规则  自定义方法只能用any 因为校验成功时必须为callback()才能通过验证
const twoPassword = (
  rule: unknown,
  value: unknown,
  callback: (value?: string) => void
) => {
  if (changePasswordForm.value.newPassword !== value) {
    callback("两次密码不一致!");
  } else {
    callback();
  }
};
const formRules = {
  oldPassword: [
    {
      required: true,
      message: "原密码不能为空",
      trigger: "blur",
    },
  ],
  newPassword: [
    {
      required: true,
      message: "新密码不能为空",
      trigger: "blur",
    },
  ],
  confirmPassword: [
    {
      required: true,
      message: "确认新密码不能为空",
      trigger: "blur",
    },
    { validator: twoPassword, trigger: "blur" },
  ],
};
// 申明表单
const changePasswordFormRef = ref();
const changePasswordForm = ref({} as ChangePassword);
const confirm = () => {
  changePasswordFormRef.value
    .validate()
    .then(() => {
      api.http
        .postJson("/system/changePassword", changePasswordForm.value)
        .then((res) => {
          if (res.data == 1) {
            changePasswordForm.value = {} as ChangePassword;
            emit("close");
          }
          console.log("发送修改密码成功");
        })
        .catch((err) => {
          console.log(err);
        });
    })
    .catch(() => {
      console.log("校验失败");
    });
};
</script>

<style scoped></style>
